<template>
  <div>
    <Col span="16" class="main_right_items" style="padding: 0" :style="'width:'+ main_right_items_width + 'px'">
      <Scroll class="main_items_scroll" :height="clientHeight">
        <div class="result_search">
          <span class="item">身份证号 <input type="text" v-model="searchNum"></span>
          <!--<span class="item">时间 <input type="text" v-model="searchTime"></span>-->
          <span class="item">
            时间
            <DatePicker @on-change="getTime" style="width: 200px;" type="datetimerange" format="yyyy-MM-dd" split-panels
                        placeholder="请选择起止时间"></DatePicker>
          </span>
          <span class="item">种类
           <Select v-model="screeningModel" multiple style="width:200px">
                <Option v-for="item in screeningItems" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
          </span>
          <Button type="primary" @click="search">查询</Button>
        </div>
        <div class="result_list_title">
          <span style="flex: 1;">病历号</span>
          <span style="flex: 1;">图像</span>
          <span style="flex: 1;">姓名</span>
          <span style="flex: 2;">身份证号</span>
          <span style="flex: 1;">模式</span>
          <span style="flex: 2;">时间</span>
          <span style="flex: 1;">查看</span>
        </div>

        <div class="result_list_item" v-for="item in result">
          <span style="flex: 1;">{{item.id}}</span>
          <span style="flex: 1;" @click="handleView(item)" class="result_detail"><img :src="item.url" alt=""
                                                                                      style="width: 80px;"></span>
          <span style="flex: 1;">{{item.owner}}</span>
          <span style="flex: 2;">{{item.number}}</span>
          <span style="flex: 1;">{{item.type==0?'左眼':'右眼'}}</span>
          <span style="flex: 2;">{{item.time}}</span>
          <span style="flex: 1;" class="result_detail" @click="getDetail(item)">详情</span>
        </div>
      </Scroll>
    </Col>

    <Modal v-model="visible">
      <img :src="imgName" v-if="visible" style="width: 100%">
    </Modal>
  </div>
</template>

<script>
  import {apiPre} from '../js/config';
  import axios from 'axios';

  export default {
    name: "result",
    data() {
      return {
        main_right_items_width: 1000,
        clientHeight: 0,
        result: [],
        screeningItems: [
          {
            value: '00',
            label: '眼底视网膜血管分割'
          },
          {
            value: '01',
            label: '微动脉瘤检测'
          },
          {
            value: '10',
            label: '视盘视杯定位'
          },
          {
            value: '11',
            label: '视盘视杯分割'
          },
          {
            value: '12',
            label: '杯盘比计算(CDR)'
          }
        ],
        screeningModel: [],
        visible: false,
        searchNum: '',
        searchTime: ['']
      }
    },
    methods: {
      getTime(e) {
        console.log('this.searchTime', e)
        this.searchTime = e;
      },
      search() {
        // console.log(this.searchTime)
        this.getResult({num: this.searchNum, time: this.searchTime})
      },
      getResult(params) {
        axios.get(apiPre + 'result', {params: params}).then((res) => {
          // console.log('result res', res.data.data);
          this.result = res.data.data;
        }).catch((err) => {
          console.log(err);
        })
      },
      handleView(item) {
        console.log('handleView');
        this.imgName = item.url;
        this.visible = true;
      },
      getDetail(item) {
        // window.open('http://202.197.66.62:20511/#/detail/' + item.id);
        window.open('http://localhost:8080/#/detail/' + item.id);
      }
    },
    mounted() {
      this.clientHeight = document.documentElement.clientHeight - 60;
      this.main_right_items_width = document.body.clientWidth - 255
      this.search();

      axios.get(apiPre + 'screeningList').then((res) => {
        console.log('screeningList', res)
      }).catch((err) => {
        console.log('screeningList', err)
      })
    }
  }
</script>

<style scoped lang="scss">
  .ivu-menu {
    width: auto !important;
  }

  .main_right_items {
    width: 80%;
    height: 100%;
    padding: 0 10px;
  }

  .main_item {
    p {
      margin: 20px 0;
      span {
        display: inline-block;
        width: 33%;
      }
    }
  }

  .main_items_scroll {
    /*height: 1000px;*/
    position: relative;
    /*left: 20%;*/
    height: 100%;
    .ivu-scroll-container {
      /*height: 100%;*/
      position: absolute;
    }
  }

  .result_list_title {
    background-color: rgb(41, 47, 62);
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 18px;
    color: #fff;
    span {
      text-align: center;
    }
  }

  .result_list_item {
    background-color: rgba(64, 71, 91, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;
    color: #fff;
    border-bottom: 1px solid #fff;
    padding-top: 5px;
    span {
      text-align: center;
    }
  }

  .result_detail:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .result_search {
    padding: 5px 10px;
    .item {
      margin-right: 20px;
      input {
        height: 30px;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        padding: 0 2px;
      }
    }
    Button {
      float: right;
    }
  }
</style>
